<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>货站帮（聚成国际）</title>
	<link rel="stylesheet" href="./css/saoma.css?v=06">
	<link rel="stylesheet" href="./layui/css/layui.css">
</head>

<body>
	<form action="">
		<!-- 货站名称 -->
		<div class="huozhan_name"></div>
		<div class="wrap">
			<div class="flex_box_wrap">
				<div class="flex_box">
					<div class="flex_box_left">
						寄
					</div>
					<div class="flex_box_right">
						<div class="right_box_one">
							<input type="text" name="" id="" placeholder="请输入寄件人及电话" value="" class="fahuoren">
						</div>
						<div class="right_box_two">
							<input type="text" name="" id="" placeholder="请输入发货地址" value="" class="fahuoaddress">
						</div>
					</div>
					<div class="dizhi" onclick="addAddress()">
						<img src="./image/address.png" alt="">
						<div>地址簿</div>
					</div>
				</div>
				<div class="line"></div>
				<div class="flex_box">
					<div class="flex_box_leftcopy">
						收
					</div>
					<div class="flex_box_right">
						<div class="right_box_one">
							<input type="text" name="" id="" placeholder="请输入收件人及电话" value="" class="shouhuoren">
						</div>
						<div class="right_box_two">
							<input type="text" name="" id="" placeholder="请输入收货地址" value="" class="shouhuoaddress">
						</div>
					</div>
					<div class="dizhi" onclick="addAddress()">
						<img src="./image/address.png" alt="">
						<div>地址簿</div>
					</div>
				</div>
			</div>
			<!-- 货物信息 -->
			<div class="huowu_infor_wrap">
				<div class="huowu_every_row">
					<span>货物名称</span><input type="text" value="" class="ipt mingcheng" placeholder="请输入货物名称">
				</div>
				<div class="huowu_every_row">
					<span>包装</span><input type="text" value="" class="ipt baozhuang" placeholder="请输入包装">
				</div>
				<div class="huowu_every_row">
					<span>货物重量(kg)</span><input type="number" value="" class="ipt zhongliang" placeholder="请输入货物重量">
				</div>
				<div class="huowu_every_row">
					<span>货物体积(m³)</span><input type="number" value="" class="ipt tiji" placeholder="请输入货物体积">
				</div>
				<div class="huowu_every_row">
					<span>货物数量(件)</span><input type="number" value="" class="ipt number" placeholder="请输入货物件数">
				</div>
				<div class="huowu_every_row">
					<span>付款方式</span>
					<select name="" id="" class="fukuanfangshi">
						<option value="到付">到付</option>
						<option value="现付">现付</option>
						<option value="货到打卡">货到打卡</option>
						<option value="月结">月结</option>
						<option value="回付">回付</option>
						<option value="免费">免费</option>
					</select>
				</div>
				<div class="huowu_every_row">
					<span>备 注</span><input type="text" value="" class="ipt huobeizhu" placeholder="请输入货物备注">
				</div>
			</div>
			<div class="shenhe_btn" lay-submit="" lay-filter="demo1">
				提交
			</div>
			<div class="all">
				<div class="tankuang">
					<img src="./image/ok.png" alt="">
					<div>订单提交成功</div>
					<div class="one_btn" onclick="closeTanChuang()">确定</div>
				</div>
			</div>
		</div>
	</form>
</body>
<script src="./jquery/api.js" charset="utf-8"></script>
<script src="./jquery/jquery.js"></script>
<script src="./layui/layui.all.js"></script>
<script type="text/javascript">
	console.log(api)
	// 这个页面如果有code
	// 获取code
	function getQueryVariable(variable) {
		// 参数 window.location.search
		var query = decodeURI(window.location.search.substring(1));
		var vars = query.split("&");
		for (var i = 0; i < vars.length; i++) {
			var pair = vars[i].split("=");
			if (pair[0] == variable) {
				return pair[1];
			}
		}
		return (false);
	}
	// 查看有没有地址信息
	console.log(decodeURI(getQueryVariable('dizhi')))
	if (getQueryVariable('dizhi')) {
		console.log('从地址页面跳过来的')
	}
	// 地址簿
	function addAddress() {
		window.location.href = "http://user.city1000.cn:9999/weixin/wechat/h5/redirectSomeWhere?url="
			+ "http://hesuan.city1000.cn/sao/address.html&data=0"
	}
	// 获取货站名称
	$.ajax({
		url: api + "/getZhangHaoById",
		type: "get",
		data: {
			zhanghaoId: getQueryVariable('state')
		},
		success: function (res) {
			console.log(res)
			if (res.code == 0) {
				let data = res.list[0]
				$('.huozhan_name').html(`${res.list[0].name}`)
			} else {
				//不等于0时填出的内容
				layer.msg(res.msg)
			}
		},
		error: function (err) {
			console.log(err)
			layer.msg("网络繁忙，访问失败")
		}
	})

	document.getElementsByClassName('wrap')[0].style.height = window.screen.height + "px"
	layui.use(['form', 'layer', 'jquery'], function () {
		var form = layui.form,
			layer = layui.layer,
			$ = layui.jquery;
		var flag = true;//提交的锁
		//监听提交
		form.on('submit(demo1)', function (data) {
			console.log($('input:radio:checked').val())
			flag = false
			var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
			// 判断是不是都是数字
			var reg = /^[0-9]*$/
			// 分割人名手机号
			var idx = $('.fahuoren').val().indexOf('1')
			// 判断收货方信息
			if (!$('.shouhuoren').val().includes('1')) {
				layer.msg('请输入收货人及手机号')
				flag = true
				return
			} else {
				var idxcopy = $('.shouhuoren').val().indexOf('1')
				if (!$('.shouhuoren').val().substring(0, idxcopy)) {
					layer.msg('请输入收货人')
					flag = true
				} else if (!$('.shouhuoren').val().substring(idxcopy)) {
					layer.msg('请输入收货人手机号')
					flag = true
				} else if (!reg_tel.test($('.shouhuoren').val().substring(idxcopy))) {
					layer.msg('收货人手机号有误')
					flag = true
				} else if (!$('.shouhuoaddress').val()) {
					layer.msg('请输入收货人地址')
					flag = true
				} else {
					// 收发货方信息都有
					if (!$('.mingcheng').val()) {
						layer.msg('请输入货物名称')
						flag = true
					} else if (!$('.number').val()) {
						layer.msg('货物数量不能为空')
						flag = true
					} else {
						let datas = {
							zhonglei: $('.zhonglei').val(), // 种类
							name: $('.mingcheng').val(), // 名称
							nummber: $('.number').val(), // 数量
							zhongliang: $('.zhongliang').val(), // 重量 
							fahuoren: $('.fahuoren').val().substring(0, idx), // 发货人 
							fatel: $('.fahuoren').val().substring(idx), // 发货人手机号 
							faaddress: $('.fahuoaddress').val(), // 发货人地址
							shouhuoren: $('.shouhuoren').val().substring(0, idxcopy), // 收货人 
							shouaddress: $('.shouhuoaddress').val(), // 收货人地址
							shoutel: $('.shouhuoren').val().substring(idxcopy), // 收货人手机号 
							remarkss: $('.huobeizhu').val(), // 备注 
							baoZhuang: $('.baozhuang').val(),
							tiJi: $('.tiji').val(),
							// fuKuanFangShi:$('input:radio:checked').val(),
							zhanghaoid: getQueryVariable('zhanghaoid') // 属于哪个货站
						}
						$.ajax({
							url: api + "/addDingDan",
							type: "post",
							data: datas,
							success: function (res) {
								console.log(res)
								if (res.code == 200) {
									document.body.scrollTop = 0;
									document.documentElement.scrollTop = 0;
									document.getElementsByClassName('wrap')[0].style.height = window.screen.height + "px"
									document.body.style.overflow = "hidden"
									$(".all").css("display", "block")
									flag = true
								} else {
									layer.msg(res.msg)
									flag = true
								}
							},
							error: function (err) {
								console.log(err)
								layer.msg("网络繁忙，访问失败")
								flag = true
							}
						})
					}
				}
			}
		})
	})
	function closeTanChuang() {
		document.body.scrollTop = 0;
		document.documentElement.scrollTop = 0;
		document.getElementsByClassName('wrap')[0].style.height = window.screen.height + "px"
		document.body.style.overflow = "auto"
		$(".all").css("display", "none")
		// 页面内容清空
		$('.zhonglei').val('')
		$('.mingcheng').val('')
		$('.number').val('')
		$('.zhongliang').val('')
		$('.fahuoren').val('')
		$('.fahuoaddress').val('')
		$('.shouhuoaddress').val('')
		$('.shouhuoren').val('')
		$('.huobeizhu').val('')
		$('.tiji').val('')
		$('.baozhuang').val('')
	}
</script>

</html>